<template>
  <div
    id="r-panel"
    @mouseenter="mark = true"
    @mouseleave="mark = false"
    @click="jumpToSong(songVO.id)"
    :class="{ mark: mark }"
  >
    <div class="left">
      <img
        :src="'http://localhost:8888' + songVO.imgUrl || ''"
        alt=""
      />
    </div>
    <div class="right">
      <h3>{{ songVO.name }}</h3>
      <p>{{ songVO.artist }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { RecommendSongs } from '@/types/song'
import { ref } from 'vue'

const mark = ref(false)

const emits = defineEmits(['flesh'])

defineProps<{
  songVO: RecommendSongs
}>()

const jumpToSong = (id: number): void => {
  emits('flesh', id)
}
</script>

<style scoped>
#r-panel {
  width: 100%;
  height: 7em;
  display: flex;
  justify-content: space-between;
  background-color: #46714f;
  margin-bottom: 0.5em;
}

.mark {
  transform: scale(1.2);
}

img {
  width: 100%;
  height: 100%;
}

.left {
  width: 8em;
  height: 100%;
  background-color: #c4caef;
}

.right {
  width: 15em;
  height: 100%;
  padding: 0.5em;
  background-color: #ffbe3d;
}
</style>
